<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Turtle.online</title>
	<meta name="keywords" content="PC前端框架，JS" />
    <meta name="description" content="一款专注于PC前端的架构" />
    <link type="text/css" rel="stylesheet" href="css/demo.css"></link>
    <script type="text/javascript">
		function _getQS(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}
		function _loadCss(urlList) {			
			for (var i = 0; i < urlList.length; i++) {
				var link = document.createElement("link");
				link.type = "text/css";
				link.rel = "stylesheet";
				link.href = urlList[i];
				document.getElementsByTagName("head")[0].appendChild(link);
			}
		}
		function _loadJS(urlList, callback) {
			callback = callback || function() {};
			var mark = 0;
			var loadJavaScript = function(jsurl) {
				var oHead = document.getElementsByTagName('head')[0];
				if (oHead) {
					var oScript = document.createElement('script');
					oScript.setAttribute('src', jsurl);
					oScript.setAttribute('type', 'text/javascript');
					oScript.onreadystatechange = loadFunction;
					oScript.onload = callbackfunction;
					oHead.appendChild(oScript);
				}
			}
			var callbackfunction = function() {
				console.log(urlList[mark] + '加载完成');
				mark++;
				if (mark < urlList.length) {
					loadJavaScript(urlList[mark]);
				} else {
					callback();
				}
			};
			var loadFunction = function() {
				if (this.readyState == 'complete' || this.readyState == 'loaded') {
					callbackfunction();
				}
			};
			loadJavaScript(urlList[mark]);
		}
		if(_getQS('debug')==1){
			_loadCss([
				"../components/css/Turtle.css",
				"../components/css/laydate.css",
				"../components/css/poshytip.css",
				"../components/css/layerpop.css"
			]);
			_loadJS([
				'../common/jquery.js',
				'../common/underscore.js',
				'../common/require.js',
				'../common/backbone.js',
				'../common/jquery.underscore.plugin.js',
				'../components/laydate.js',
				'../components/poshytip.js',
				'../components/layerpop.js',
				'../components/uiImgSlider.js',
				'../components/uiPaging.js',
				'../components/uiSelect.js',
				'../components/uiExpressInput.js',
				'../components/uiRadio.js',
				'../components/uiCheckbox.js',
				'../components/Turtle.js'
			],function(){
				console.log('全部js加载完成');
			});
		}else{
			_loadCss(["../build/css/Turtle.min.css"]);
			_loadJS(["../build/Turtle.min.js"]);
		}
	</script>
</head>
<body>
	<div class="dm_header">
		Turtle Online
        <span style="font-size: 12px;color: #969696;">阅读（<span id="busuanzi_value_page_pv" class="uvNum">ing...</span>）</span>
	</div>
	<div class="dm_main">
		<div class="dm_nav">
			<ul>
				<li>
					<h2>基本组件</h2>
				</li>
				<li class="dm_select"><a href="javascript:;" forid='calendarAnchor'><cite>日历</cite><em>LayDate</em></a></li>
				<li><a href="javascript:;" forid='poshyTipAnchor'><cite>气泡弹层提示</cite><em>PoshyTip</em></a></li>
				<li><a href="javascript:;" forid='showPopAnchor'><cite>弹出层</cite></a></li>
				<li><a href="javascript:;" forid='pictureAnchor'><cite>图片展示</cite></a></li>
				<li><a href="javascript:;" forid='pagingAnchor'><cite>分页</cite></a></li>
				<li><a href="javascript:;" forid='iconfontAnchor'><cite>图标icon</cite></a></li>
				<li><a href="javascript:;" forid='formAnchor'><cite>表单</cite></a></li>
				<!-- <li><a href="javascript:;" forid=''><cite>导航</cite><em>菜单、tab</em></a></li>
				<li><a href="javascript:;" forid=''><cite>表格</cite></a></li> -->

				<li>
					<h2>API</h2>
				</li>
				<li><a href="javascript:;" forid='cpageViewAnchor'><cite>cPageView</cite><em>页面框架</em></a></li>
				<li><a href="javascript:;" forid='templateAnchor'><cite>模板</cite><em>Require.text.js</em></a></li>
				<li><a href="javascript:;" forid='commonAPI'><cite>公共方法</cite><em>调用时以Turtle.开头</em></a></li>
			</ul>
		</div>
		<div class="dm_content">
			<div class="dm_title" id='calendarAnchor'>日历</div>
			<div class="dm_desc">
				<a target="_blank" href="http://laydate.layui.com">laydate.js，参考【layDate v1.1】</a>
			</div>
			<div class="dm-item">
				<!-- <input type="text" name="title" placeholder="请输入标题" class="ttl-input">
				<div class="ttl-form-item">
		          <label>输入框</label>
		          <p class="ttl-full">
		          	<input type="text" name="title" placeholder="请输入标题" class="ttl-input">
		          </p>
		        </div> -->

		        <div class="ttl-form-item">
		          <label>默认格式</label>
		          <p class="ttl-normal">
		          	<input type="text" id="txtShowCalendar" class="ttl-input laydate-icon">
		          </p>
		        </div>
		        <div class="ttl-form-item">
		          <label>自定义参数</label>
		          <p class="ttl-normal">
		          	<input type="text" id="txtShowCalendarSelf" class="ttl-input laydate-icon">
		          </p>
		        </div>
		        <div class="ttl-form-item">
		          <label>点击我显示日历</label>
		          <p class="ttl-mult">
		          	<input type="text" id="txtShowCalendar2" class="ttl-input laydate-icon">
		          	<button id='showCalendarA' class="ttl-btn ttl-btn-small">点击我显示日历</button>
		          </p>
		        </div>
		        <div class="ttl-form-item">
		          <label>自定义日期格式</label>
		          <p class="ttl-normal">
		          	<input type="text" id="txtShowCalendar3" class="ttl-input laydate-icon">
		          </p>
		        </div>
		        <div class="ttl-form-item">
		          <label>限定日期</label>
		          <p class="ttl-mult">
		          	<input type="text" id="txtShowCalendar4" class="ttl-input laydate-icon">
		          	<i class='ttl-mark'>日期范围限定在昨天到明天</i>
		          </p>
		        </div>
		        <div class="ttl-form-item">
		          <label>日期范围</label>
		          <p class="ttl-mult">
		          	<input type="text" id="txtShowCalendarBegin" class="ttl-input laydate-icon"> -
		          	<input type="text" id="txtShowCalendarEnd" class="ttl-input laydate-icon">
		          </p>
		        </div>
		        <div class="dm_moreskin">
		        	<div class="dm_title2">更多皮肤</div>
					<div class="ttl-form-item">
			          <label>大红皮肤</label>
			          <p class="ttl-normal">
			          	<input type="text" id="txtShowCalendarSkin1" class="ttl-input laydate-icon-dahong">
			          </p>
			        </div>
					<div class="ttl-form-item">
			          <label>淡蓝皮肤</label>
			          <p class="ttl-normal">
			          	<input type="text" id="txtShowCalendarSkin2" class="ttl-input laydate-icon-danlan">
			          </p>
			        </div>
					<div class="ttl-form-item">
			          <label>墨绿皮肤</label>
			          <p class="ttl-normal">
			          	<input type="text" id="txtShowCalendarSkin3" class="ttl-input laydate-icon-molv">
			          </p>
			        </div>
					<div class="ttl-form-item">
			          <label>浅黄皮肤</label>
			          <p class="ttl-normal">
			          	<input type="text" id="txtShowCalendarSkin4" class="ttl-input laydate-icon-qianhuang">
			          </p>
			        </div>
					<div class="ttl-form-item">
			          <label>雅灰皮肤</label>
			          <p class="ttl-normal">
			          	<input type="text" id="txtShowCalendarSkin5" class="ttl-input laydate-icon-yahui">
			          </p>
			        </div>
					<div class="ttl-form-item">
			          <label>雅兰皮肤</label>
			          <p class="ttl-normal">
			          	<input type="text" id="txtShowCalendarSkin6" class="ttl-input laydate-icon-yalan">
			          </p>
			        </div>
					<div class="ttl-form-item">
			          <label>黄绿皮肤</label>
			          <p class="ttl-normal">
			          	<input type="text" id="txtShowCalendarSkin7" class="ttl-input laydate-icon-huanglv">
			          </p>
			        </div>
		        </div>
		        <div class="dm_title2">参考代码</div>
		        <div>
					<pre><span style="color: #000000;">            Turtle.laydate({
		                elem: </span>'#txtShowCalendarSelf', <span style="color: #008000;">//</span><span style="color: #008000;">需显示日期的元素选择器</span>
		                event: 'click', <span style="color: #008000;">//</span><span style="color: #008000;">触发事件</span>
		                format: 'YYYY-MM-DD hh:mm:ss', <span style="color: #008000;">//</span><span style="color: #008000;">日期格式</span>
		                istime: <span style="color: #0000ff;">false</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否开启时间选择,即可选几点几分几秒</span>
		                isclear: <span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否显示清空按钮</span>
		                istoday: <span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否显示今天按钮</span>
		                issure: <span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否显示确认按钮</span>
		                festival: <span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否显示节日，国庆、元旦、清明等阳历节日</span>
		                init: <span style="color: #0000ff;">false</span>,<span style="color: #008000;">//</span><span style="color: #008000;">是否在elem中显示当前时间，默认为false</span>
		                min: '1900-01-01 00:00:00', <span style="color: #008000;">//</span><span style="color: #008000;">最小日期，可选的最小日期</span>
		                max: '2099-12-31 23:59:59', <span style="color: #008000;">//</span><span style="color: #008000;">最大日期，可选的最大日期</span>
		                start: '2014-6-15 23:00:00',    <span style="color: #008000;">//</span><span style="color: #008000;">如果init==false，把start设置为开始日期，如果init==true时，该值无效。即如果elem有值，该值无效</span>
		                fixed: <span style="color: #0000ff;">false</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否固定在可视区域</span>
		                zIndex: 99999999, <span style="color: #008000;">//</span><span style="color: #008000;">css z-index</span>
		                choose: <span style="color: #0000ff;">function</span>(dates){ <span style="color: #008000;">//</span><span style="color: #008000;">选择好日期的回调,dates是选择日期的字符串，如&ldquo;2016-09-21 12:57:27&rdquo;</span>
					<span style="color: #000000;">                }
					            });</span></pre>
					</div>
				<div class="dm_title2">更多API</div>
				<div>
					<pre><span style="color: #000000;">
					一、核心方法：laydate(options);
			                    options是一个对象，它包含了以下key: </span>'默认值'<span style="color: #000000;">
			                    {
			                      elem: </span>'#id', <span style="color: #008000;">//</span><span style="color: #008000;">需显示日期的元素选择器</span>
			                      event: 'click', <span style="color: #008000;">//</span><span style="color: #008000;">触发事件</span>
			                      format: 'YYYY-MM-DD hh:mm:ss', <span style="color: #008000;">//</span><span style="color: #008000;">日期格式</span>
			                      istime: <span style="color: #0000ff;">false</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否开启时间选择</span>
			                      isclear: <span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否显示清空</span>
			                      istoday: <span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否显示今天</span>
			                      issure: <span style="color: #0000ff;">true</span><span style="color: #000000;">, 是否显示确认
			                      festival: </span><span style="color: #0000ff;">true</span> <span style="color: #008000;">//</span><span style="color: #008000;">是否显示节日</span>
			                      min: '1900-01-01 00:00:00', <span style="color: #008000;">//</span><span style="color: #008000;">最小日期</span>
			                      max: '2099-12-31 23:59:59', <span style="color: #008000;">//</span><span style="color: #008000;">最大日期</span>
			                      start: '2014-6-15 23:00:00',  <span style="color: #008000;">//</span><span style="color: #008000;">开始日期</span>
			                      fixed: <span style="color: #0000ff;">false</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否固定在可视区域</span>
			                      zIndex: 99999999, <span style="color: #008000;">//</span><span style="color: #008000;">css z-index</span>
			                      choose: <span style="color: #0000ff;">function</span>(dates){ <span style="color: #008000;">//</span><span style="color: #008000;">选择好日期的回调</span>
								<span style="color: #000000;">                     
			                      }
			                    }
			        	二、其它方法</span>/属性
			                    laydate.v   <span style="color: #008000;">//</span><span style="color: #008000;">获取laydate版本号</span>
			                    laydate.skin(lib);  <span style="color: #008000;">//</span><span style="color: #008000;">加载皮肤，参数lib为皮肤名 </span>
			                    <span style="color: #008000;">/*</span><span style="color: #008000;">
			                      layer.now支持多类型参数。timestamp可以是前后若干天，也可以是一个时间戳。format为日期格式，为空时则采用默认的&ldquo;-&rdquo;分割。
			                      如laydate.now(-2)将返回前天，laydate.now(3999634079890)将返回2096-09-28
			                    </span><span style="color: #008000;">*/</span><span style="color: #000000;">
			                    layer.now(timestamp, format);   </span><span style="color: #008000;">//</span><span style="color: #008000;">该方法提供了丰富的功能，推荐灵活使用。</span>
			                    laydate.reset();  <span style="color: #008000;">//</span><span style="color: #008000;">重设日历控件坐标，一般用于页面dom结构改变时。无参</span>
			               </pre>

				</div>
			</div>

			<div class="dm_title" id='poshyTipAnchor'>气泡弹层提示</div>
			<div class="dm_desc">
				<a target="_blank" href="http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips">poshytip.js，参考【Poshy Tip jQuery plugin v1.0】</a>
			</div>
			<div class="dm-item">
				<div class="dm_btnOpt">				
					<span id="showPoshyTipColors1" title="鼠标悬停提示内容！">鼠标悬停提示，黄色(默认)</span>
					<span id="showPoshyTipColors2" title="鼠标悬停提示内容！">鼠标悬停提示，黄色简单模式</span>
					<span id="showPoshyTipColors3" title="鼠标悬停提示内容！">鼠标悬停提示，紫色</span>
					<span id="showPoshyTipColors4" title="鼠标悬停提示内容！">鼠标悬停提示，twitter颤抖</span>
					<span id="showPoshyTipColors5" title="鼠标悬停提示内容！">鼠标悬停提示，天蓝</span>
					<span id="showPoshyTipColors6" title="鼠标悬停提示内容！">鼠标悬停提示，绿色</span>
					<span id="showPoshyTipColors7" title="鼠标悬停提示内容！">鼠标悬停提示，深灰色</span>
					<button id="showAll" class='ttl-btn ttl-btn-small'>全部显示</button>
					<button id="hideAll" class='ttl-btn ttl-btn-small'>全部隐藏</button>
				</div>
				<div class="dm_4Direction">
					<span id="showPoshyTip1" class='ttl-btn ttl-btn-primary dm_t'>上面</span>
					<span id="showPoshyTip2" class='ttl-btn ttl-btn-primary dm_r'>右边</span>
					<span id="showPoshyTip3" class='ttl-btn ttl-btn-primary dm_b'>下边</span>
					<span id="showPoshyTip4" class='ttl-btn ttl-btn-primary dm_l'>左边</span>
				</div>
				<p id="showPoshySelf1" class="dm_withMouse">提示跟随鼠标</p>
				<p id="showPoshySelf2" class="ttl-btn ttl-btn-primary">没有动画</p>
				<p id="showPoshySelf3" class="ttl-btn ttl-btn-primary">内容包含html</p>
				<p id="showPoshySelf5" class="ttl-btn ttl-btn-primary">提示动态修改</p>
				<p>
					<img id="showPoshySelf4" style="width:100px;height:100px;margin:10px 0;" src="images/my.jpg"/>
				</p>
				<br/>
				<div class="ttl-form-item">
		          <label>姓名：</label>
		          <p class="ttl-full">
		          	<input type="text" id="showPoshyInput1" title="输入姓名" class="ttl-input">
		          </p>
		        </div>
				<div class="ttl-form-item">
		          <label>邮箱：</label>
		          <p class="ttl-full">
		          	<input type="text" id="showPoshyInput2" title="输入邮箱" class="ttl-input">
		          </p>
		        </div>
				<div class="ttl-form-item">
		          <label>地址：</label>
		          <p class="ttl-full">
		          	<input type="text" id="showPoshyInput3" title="输入地址" class="ttl-input">
		          </p>
		        </div>
				<div class="ttl-form-item">
		          <label>爱好：</label>
		          <p class="ttl-full">
		          	<input type="text" id="showPoshyInput4" title="输入爱好" class="ttl-input">
		          </p>
		        </div>

		        <div class="dm_title2">来自Layer弹框</div>
				<div class="dm_4Direction">
					<span id="showTip1" class='ttl-btn ttl-btn-primary dm_t'>上面</span>
					<span id="showTip2" class='ttl-btn ttl-btn-primary dm_r'>右边</span>
					<span id="showTip3" class='ttl-btn ttl-btn-primary dm_b'>下边</span>
					<span id="showTip4" class='ttl-btn ttl-btn-primary dm_l'>左边</span>
				</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);"  class="ttl-btn ttl-btn-primary" id="showTip5">自定义颜色</a>
					<a href="javascript:void(0);"  class="ttl-btn ttl-btn-primary" id="showTip6">弹出后回调方法</a>
				</div>

		        <div class="dm_title2">参考代码</div>
		        <div>
					<pre>		$('#showPoshySelf3'<span style="color: #000000;">).poshytip({
				            content: </span>'你好:&lt;p style="margin:2px 10px;"&gt;Alec Yin&lt;/p&gt;敬礼！'<span style="color: #000000;">,
				            showTimeout:</span>1<span style="color: #000000;">,
				            hideTimeout:</span>1<span style="color: #000000;">
				        });</span>
					</pre>
				</div>
				<div class="dm_title2">更多API</div>
				<div>
					<pre><span style="color: #000000;">
					$.fn.poshytip.defaults </span>=<span style="color: #000000;"> {   
					    </span><span style="color: #008000;">//</span><span style="color: #008000;"> 提示内容默认为元素的标题，可以使指定的字符串、元素、回调函数、jquery对象   </span>
					    content:'[title]'<span style="color: #000000;">, 
					    </span><span style="color: #008000;">//</span><span style="color: #008000;"> 指定的tips class样式   </span>
					    className:'tip-yellow'<span style="color: #000000;">,   
					    </span><span style="color: #008000;">//</span><span style="color: #008000;">按照像素计算背景图片和显示内容的内边距   </span>
					    bgImageFrameSize:10<span style="color: #000000;">,   
					    showTimeout:</span>500,<span style="color: #008000;">//</span><span style="color: #008000;"> 延时多久开始显示   </span>
					    hideTimeout:100,<span style="color: #008000;">//</span><span style="color: #008000;"> 延时多久开始隐藏   </span>
					    timeOnScreen:0,<span style="color: #008000;">//</span><span style="color: #008000;"> 自动隐藏之前延时多久   </span>
					    <span style="color: #008000;">//</span><span style="color: #008000;">显示方式 支持'hover'鼠标划入、'focus' 获取焦点、'none'手动显式调用  </span>
					    showOn:'hover'<span style="color: #000000;">,   
					    liveEvents:</span><span style="color: #0000ff;">false</span>,<span style="color: #008000;">//</span><span style="color: #008000;"> 支持live  事件  同样可以对未来元素进行影响  </span>
					    alignTo:'cursor',<span style="color: #008000;">//</span><span style="color: #008000;"> 和谁进行对齐 ('cursor' 鼠标, 'target' 目标元素)   </span>
					    <span style="color: #008000;">//</span><span style="color: #008000;"> 水平方向对齐方式 可选参数：   </span>
					    <span style="color: #008000;">//</span><span style="color: #008000;">('right', 'center', 'left', 'inner-left', 'inner-right')   </span>
					    alignX:'right'<span style="color: #000000;">,   
					    </span><span style="color: #008000;">//</span><span style="color: #008000;"> 垂直方向对齐方式 可选参数：   </span>
					    <span style="color: #008000;">//</span><span style="color: #008000;">('bottom', 'center', 'top', 'inner-bottom', 'inner-top')   </span>
					    alignY:'top'<span style="color: #000000;">,   
					    offsetX:</span>-22,<span style="color: #008000;">//</span><span style="color: #008000;"> 水平偏移量   </span>
					    offsetY:18,<span style="color: #008000;">//</span><span style="color: #008000;"> 垂直方向偏移量   </span>
					    <span style="color: #008000;">//</span><span style="color: #008000;">hover显示方式下，允许鼠标离开元素仍然显示提示信息   </span>
					    allowTipHover:<span style="color: #0000ff;">true</span><span style="color: #000000;">,   
					    </span><span style="color: #008000;">//</span><span style="color: #008000;"> 提示信息随着鼠标移动  只在满足hover显示方式下，对齐方式为alignTo:'cursor' 才有效  </span>
					    followCursor:<span style="color: #0000ff;">false</span><span style="color: #000000;">,   
					    fade:</span><span style="color: #0000ff;">true</span>,<span style="color: #008000;">//</span><span style="color: #008000;"> 使用动画   </span>
					    slide:<span style="color: #0000ff;">true</span>,<span style="color: #008000;">//</span><span style="color: #008000;"> 使用slie效果   </span>
					    slideOffset:8,<span style="color: #008000;">//</span><span style="color: #008000;"> slide 动画的偏移量   </span>
					    <span style="color: #008000;">//</span><span style="color: #008000;"> 动画显示的时间间隔 如果不想动画效果，设置为0即可   </span>
					    showAniDuration:300<span style="color: #000000;">,   
					    </span><span style="color: #008000;">//</span><span style="color: #008000;"> 动画隐藏的时间间隔 如果不想动画效果，设置为0即可   </span>
					    hideAniDuration:300<span style="color: #000000;">   
					}; 
					核心方法:
					    .poshytip(</span>'show'<span style="color: #000000;">)    手动显示tip   
					    .poshytip(</span>'hide'<span style="color: #000000;">)    手动隐藏tip   
					    .poshytip(</span>'update'<span style="color: #000000;">, content, [ dontOverwriteOption ] )  手动更新tip   
					    .poshytip(</span>'disable'<span style="color: #000000;">)  tip不可用   
					    .poshytip(</span>'enable'<span style="color: #000000;">)   tip可用   
					    .poshytip(</span>'destroy')  销毁tip </pre>
				</div>
			</div>

			<div class="dm_title" id='showPopAnchor'>弹出层</div>
			<div class="dm_desc">
				<a target="_blank" href="http://layer.layui.com">layerpop.js，参考【layer v2.4】</a>
			</div>
			<div class="dm-item">			
				<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsg">消息提示，默认</a>
				<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsg2">消息提示，有背景，4秒关闭，点击背景关闭，有关闭按钮</a>
				<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsg3">消息提示，弹窗不固定，随窗口滚动而滚动</a>
				<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsg4">消息提示，不允许浏览器滚动</a>

				<div class="dm_title2">7种动画效果</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsgShift0">动画 Shift=0，默认</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsgShift1">动画 Shift=1</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsgShift2">动画 Shift=2</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsgShift3">动画 Shift=3</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsgShift4">动画 Shift=4</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsgShift5">动画 Shift=5</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showMsgShift6">动画 Shift=6</a>
				</div>
			
				<div class="dm_title2">8种提示类型</div>
				<div class="dm_tit2Content">
					<div class="ttl-layer-ico" style="height: 32px"></div>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert">icon=-1,默认,无图片</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert0">icon=0，感叹号：重要提示</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert1">icon=1，对勾：操作完成提示</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert2">icon=2，叉号：错误提示</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert3">icon=3，问号：有问题提示</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert4">icon=4，锁：锁定提示</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert5">icon=5，不高兴：好遗憾提示</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert6">icon=6，高兴：好遗憾提示</a>
				</div>

				<div class="dm_title2">拖动行为</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert7">不允许拖动</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert8">允许内容拖动</a>					
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert9">拖动风格0，默认</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert10">拖动风格1</a>					
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert11">不可拖到窗外，默认</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert12">可拖到窗外</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showAlert13">拖动结束触发事件</a>
				</div>

				<div class="dm_title2">询问框</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showConfirm">询问框,默认</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showConfirm2">询问框</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showConfirm3">询问框，自定义按钮</a>
				</div>

				<div class="dm_title2">自定义弹出层</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showSelfCeng">弹出自定义层，默认</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showSelfCeng2">弹出自定义层，有最大化最小化按钮</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showIframe">以iframe方式弹出另一个页面</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showselfpop">弹出自定义层中嵌套日历</a>
					<div id="showselfpopdiv" style="display:none;">						
						<input type="text" id="showselfpopCalendar" class="ttl-input laydate-icon">
					</div>
				</div>
			
				<div class="dm_title2">加载中动画</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showLoadingPop">1秒后自动关闭</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showLoadingPop1">1秒后自动关闭,icon=1</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showLoadingPop2">1秒后自动关闭,icon=2</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showLoadingPop3">使用msg模拟</a>
				</div>

				<div class="dm_title2">输入型弹框</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showPrompt">文本框，默认</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showPrompt2">密码框</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showPrompt3">多行文本</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showPrompt4">指定长度，有默认值</a>
				</div>

				<div class="dm_title2">弹出Tab</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showLayerTab">tab层</a>
				</div>		
				<div class="dm_title2">示例代码</div>
				<div>
					<pre>		$('#showMsg').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				            Turtle.layer.msg(</span>'Hello layer'<span style="color: #000000;">);
				        });
				        $(</span>'#showMsg2').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				            Turtle.layer.msg(</span>'Hello layer',{shade:0.5,shadeClose:<span style="color: #0000ff;">true</span>,time:4000,closeBtn:1<span style="color: #000000;">});
				        });
				        $(</span>'#showMsg3').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shade:0.5,fix:<span style="color: #0000ff;">false</span><span style="color: #000000;">});});
				        $(</span>'#showMsg4').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shade:0.5,scrollbar:<span style="color: #0000ff;">false</span><span style="color: #000000;">});});
				        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 7种动画效果</span>
				        $('#showMsgShift0').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shift:0<span style="color: #000000;">});});
				        $(</span>'#showMsgShift1').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shift:1<span style="color: #000000;">});});
				        $(</span>'#showMsgShift2').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shift:2<span style="color: #000000;">});});
				        $(</span>'#showMsgShift3').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shift:3<span style="color: #000000;">});});
				        $(</span>'#showMsgShift4').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shift:4<span style="color: #000000;">});});
				        $(</span>'#showMsgShift5').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shift:5<span style="color: #000000;">});});
				        $(</span>'#showMsgShift6').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.msg('Hello layer',{shift:6<span style="color: #000000;">});});
				        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 8种提示类型</span>
				        $('#showAlert').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer'<span style="color: #000000;">);});
				        $(</span>'#showAlert0').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{icon: 0<span style="color: #000000;">,});});
				        $(</span>'#showAlert1').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{icon: 1<span style="color: #000000;">,});});
				        $(</span>'#showAlert2').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{icon: 2<span style="color: #000000;">,});});
				        $(</span>'#showAlert3').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{icon: 3<span style="color: #000000;">,});});
				        $(</span>'#showAlert4').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{icon: 4<span style="color: #000000;">,});});
				        $(</span>'#showAlert5').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{icon: 5<span style="color: #000000;">,});});
				        $(</span>'#showAlert6').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{icon: 6<span style="color: #000000;">,});});
				        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 拖动行为</span>
				        $('#showAlert7').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{move: <span style="color: #0000ff;">false</span><span style="color: #000000;">});});
				        $(</span>'#showAlert8').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{move: '.ttl-layer-content'<span style="color: #000000;">});});
				        $(</span>'#showAlert9').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{moveType: 0<span style="color: #000000;">});});
				        $(</span>'#showAlert10').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{moveType: 1<span style="color: #000000;">});});
				        $(</span>'#showAlert11').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{moveOut: <span style="color: #0000ff;">false</span><span style="color: #000000;">});});
				        $(</span>'#showAlert12').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{moveOut: <span style="color: #0000ff;">true</span><span style="color: #000000;">});});
				        $(</span>'#showAlert13').click(<span style="color: #0000ff;">function</span>(){Turtle.layer.alert('Hello layer',{moveEnd: <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				            alert(</span>'拖动结束'<span style="color: #000000;">)
				        }});});
				        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 询问框</span>
				        $('#showConfirm').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				            Turtle.layer.confirm(</span>'你好吗？'<span style="color: #000000;">);
				        });
				        $(</span>'#showConfirm2').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				            Turtle.layer.confirm(</span>'你好吗？',{icon:3,title:'提示'},<span style="color: #0000ff;">function</span><span style="color: #000000;">(index){
				                Turtle.layer.close(index);
				            });
				        });
				        $(</span>'#showConfirm3').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				            Turtle.layer.confirm(</span>'你好吗？'<span style="color: #000000;">, {
				                btn: [</span>'好', '凑活', '不好'<span style="color: #000000;">],
				                btn1: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(index) {
				                    Turtle.layer.alert(</span>'你很好！'<span style="color: #000000;">)
				                    Turtle.layer.close(index);
				                },
				                btn2: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(index) {
				                    Turtle.layer.alert(</span>'凑活就行！'<span style="color: #000000;">);
				                    Turtle.layer.close(index);
				                },
				                btn3: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(index) {
				                    Turtle.layer.alert(</span>'瞎愁啥！'<span style="color: #000000;">);
				                    Turtle.layer.close(index);
				                }
				            });
				        });

				        </span><span style="color: #008000;">//</span><span style="color: #008000;">自定义弹出层</span>
				        $('#showSelfCeng').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            Turtle.layer.open({
				                type: </span>1<span style="color: #000000;">,
				                area: [</span>'600px', '360px'<span style="color: #000000;">],
				                shadeClose: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">点击遮罩关闭</span>
				                content: '\&lt;\div style="padding:20px;"&gt;自定义内容，点击遮罩关闭\&lt;\/div&gt;'<span style="color: #000000;">
				            });
				        });
				        $(</span>'#showSelfCeng2').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            Turtle.layer.open({
				                type: </span>1<span style="color: #000000;">,
				                maxmin:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
				                area: [</span>'600px', '360px'<span style="color: #000000;">],
				                shadeClose: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">点击遮罩关闭</span>
				                content: '\&lt;\div style="padding:20px;"&gt;自定义内容，点击遮罩关闭\&lt;\/div&gt;'<span style="color: #000000;">
				            });
				        });
				        </span><span style="color: #008000;">//</span><span style="color: #008000;">弹出一个iframe层</span>
				        $('#showIframe').on('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            Turtle.layer.open({
				                type: </span>2<span style="color: #000000;">,
				                title: </span>'iframe父子操作'<span style="color: #000000;">,
				                maxmin: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
				                shadeClose: </span><span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">点击遮罩关闭层</span>
				                area: ['500px', '320px'<span style="color: #000000;">],
				                content: </span>'pageForLayerpop.html'<span style="color: #000000;">
				            });
				        });
				        </span><span style="color: #008000;">//</span><span style="color: #008000;">加载中动画Loading</span>
				        $('#showLoadingPop').on('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            </span><span style="color: #0000ff;">var</span> ii = Turtle.layer.load(0,{shade:0.3<span style="color: #000000;">});
				            setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				                Turtle.layer.close(ii);
				            }, </span>1000<span style="color: #000000;">);
				        });
				        $(</span>'#showLoadingPop1').on('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            </span><span style="color: #0000ff;">var</span> ii1 = Turtle.layer.load(1,{shade:0.5<span style="color: #000000;">});
				            setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				                Turtle.layer.close(ii1);
				            }, </span>1000<span style="color: #000000;">);
				        });
				        $(</span>'#showLoadingPop2').on('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            </span><span style="color: #0000ff;">var</span> ii2 = Turtle.layer.load(2,{shade:0.5<span style="color: #000000;">});
				            setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				                Turtle.layer.close(ii2);
				            }, </span>1000<span style="color: #000000;">);
				        });
				        $(</span>'#showLoadingPop3').on('click', <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            Turtle.layer.msg(</span>'加载中...', {shade:0.5,icon: 16<span style="color: #000000;">});
				        });        
				          </span><span style="color: #008000;">//</span><span style="color: #008000;"> 输入型弹框</span>
				          $('#showPrompt').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				              Turtle.layer.prompt({
				                  title:</span>'请输入姓名，并确认'<span style="color: #000000;">,
				                  formType:</span>0<span style="color: #000000;">,
				              },</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(name){
				                   Turtle.layer.msg(</span>'你好，'+<span style="color: #000000;">name);
				              })
				          });
				          $(</span>'#showPrompt2').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				              Turtle.layer.prompt({
				                  title:</span>'请输入密码，并确认'<span style="color: #000000;">,
				                  formType:</span>1<span style="color: #000000;">,
				              },</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(pwd){
				                   Turtle.layer.msg(</span>'口令为：'+<span style="color: #000000;">pwd);
				              })
				          });
				          $(</span>'#showPrompt3').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				              Turtle.layer.prompt({
				                  title:</span>'请输入自我介绍，并确认'<span style="color: #000000;">,
				                  formType:</span>2<span style="color: #000000;">,
				              },</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(txt){
				                   Turtle.layer.msg(txt);
				              })
				          });
				          $(</span>'#showPrompt4').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				              Turtle.layer.prompt({
				                  title:</span>'请输入6个字符，并确认'<span style="color: #000000;">,
				                  value:</span>'abc-'<span style="color: #000000;">,
				                  maxlength:</span>6<span style="color: #000000;">,
				                  formType:</span>0<span style="color: #000000;">
				              },</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(txt){
				                   Turtle.layer.msg(txt);
				              })
				          });

				          </span><span style="color: #008000;">//</span><span style="color: #008000;"> 弹出Tab</span>
				          $('#showLayerTab').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
				            Turtle.layer.tab({
				                area: [</span>'600px', '300px'<span style="color: #000000;">],
				                tab: [{
				                    title: </span>'TAB1'<span style="color: #000000;">,
				                    content: </span>'内容1'<span style="color: #000000;">
				                }, {
				                    title: </span>'TAB2'<span style="color: #000000;">,
				                    content: </span>'内容2'<span style="color: #000000;">
				                }, {
				                    title: </span>'TAB3'<span style="color: #000000;">,
				                    content: </span>'内容3'<span style="color: #000000;">
				                }]
				            });
				          });</span>
					</pre>
				</div>
			</div>
			
			<div class="dm_title" id='pictureAnchor'>图片展示</div>			
			<div class="dm-item">
				<div class="dm_title2">图片轮播</div>
				<div class="dm_tit2Content">
					<div class="imgSliderDiv" style="width:700px;height:300px;"></div>
					<div class="dm_code">示例代码</div>
					<div>
						<pre>		$('.imgSliderDiv'<span style="color: #000000;">).createImgSlider({
				            imgList:[{
				                url:</span>'images/lb1.jpg'<span style="color: #000000;">,
				                desc:</span>'这是第一个图片的说明文字。'<span style="color: #000000;">
				            },{
				                url:</span>'images/lb2.jpg'<span style="color: #000000;">,
				                desc:</span>'这是第二个图片的说明文字。'<span style="color: #000000;">
				            },{
				                url:</span>'images/lb3.jpg'<span style="color: #000000;">,
				                desc:</span>'这是第三个图片的说明文字。'<span style="color: #000000;">
				            }]
				        })</span>
						</pre>
					</div>
				</div>

				<div class="dm_title2">相册浏览</div>
				<div class="dm_desc">
					<a target="_blank" href="http://layer.layui.com">layerpop.js，参考【layer v2.4】</a>
				</div>
				<div class="dm_tit2Content">
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showPhoto">图片查看器</a>
					<a href="javascript:void(0);" class="ttl-btn ttl-btn-primary" id="showPhoto2">图片查看器，从下面DOM中获取图片，要求img标签必须有相应属性</a>
					<div id="layer-photos-demo" class="layer-photos-demo dm_imgeList">
			          <img layer-src="images/lb1.jpg" layer-pid="" src="images/lb1.jpg" alt="layer宣传图" layer-index="0">
			          <img layer-src="images/lb2.jpg" layer-pid="" src="images/lb2.jpg" alt="我入互联网这五年" layer-index="1">
			          <img layer-src="" layer-pid="" src="images/lb3.jpg" alt="微摄影" layer-index="2">
			          <img layer-src="images/lb4.jpg" layer-pid="" src="images/lb4.jpg" alt="国足" layer-index="3">
			          <img layer-src="images/lb5.jpg" layer-pid="" src="images/lb5.jpg" alt="三清山" layer-index="4">
			        </div>
			        <div class="dm_code">示例代码</div>
			        <div>
						<pre>		$('#showPhoto').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            </span><span style="color: #008000;">/*</span><span style="color: #008000;">
				                json需严格按照如下格式：
				                {
				                    "title": "", //相册标题
				                    "id": 123, //相册id
				                    "start": 0, //初始显示的图片序号，默认0
				                    "data": [ //相册包含的图片，数组格式
				                        {
				                            "alt": "图片名",
				                            "pid": 666, //图片id
				                            "src": "", //原图地址
				                            "thumb": "" //缩略图地址
				                        }
				                    ]
				                }
				            </span><span style="color: #008000;">*/</span>
				            <span style="color: #0000ff;">var</span> json =<span style="color: #000000;"> {
				                </span>"status": 1<span style="color: #000000;">,
				                </span>"msg": ""<span style="color: #000000;">,
				                </span>"title": "JSON请求的相册"<span style="color: #000000;">,
				                </span>"id": 8<span style="color: #000000;">,
				                </span>"start": 0<span style="color: #000000;">,
				                </span>"data"<span style="color: #000000;">: [{
				                    </span>"alt": "越来越喜欢观察微小的事物"<span style="color: #000000;">,
				                    </span>"pid": 109<span style="color: #000000;">,
				                    </span>"src": "images/lb1.jpg"<span style="color: #000000;">,
				                    </span>"thumb": ""<span style="color: #000000;">
				                }, {
				                    </span>"alt": "决定，意味着对与错的并存"<span style="color: #000000;">,
				                    </span>"pid": 110<span style="color: #000000;">,
				                    </span>"src": "images/lb2.jpg"<span style="color: #000000;">,
				                    </span>"thumb": "images/lb2.jpg"<span style="color: #000000;">
				                }, {
				                    </span>"alt": "梦想还是要有的，万一实现了呢"<span style="color: #000000;">,
				                    </span>"pid": 111<span style="color: #000000;">,
				                    </span>"src": "images/lb3.jpg"<span style="color: #000000;">,
				                    </span>"thumb": "images/lb3.jpg"<span style="color: #000000;">
				                }, {
				                    </span>"alt": "人与人关系图"<span style="color: #000000;">,
				                    </span>"pid": 112<span style="color: #000000;">,
				                    </span>"src": "images/lb4.jpg"<span style="color: #000000;">,
				                    </span>"thumb": ""<span style="color: #000000;">
				                }, {
				                    </span>"alt": "那忧郁的眼神，含着一丝晶莹的泪花"<span style="color: #000000;">,
				                    </span>"pid": 113<span style="color: #000000;">,
				                    </span>"src": "images/lb5.jpg"<span style="color: #000000;">,
				                    </span>"thumb": "images/lb5.jpg"<span style="color: #000000;">
				                }]
				            }
				            Turtle.layer.photos({
				                photos: json,
				                shift:</span>1 <span style="color: #008000;">//</span><span style="color: #008000;">不传动画效果，随机播放</span>
				<span style="color: #000000;">            });
				        });
				        $(</span>'#showPhoto2').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">() {
				            Turtle.layer.photos({
				                photos: </span>'#layer-photos-demo'<span style="color: #000000;">
				             });
				            $(</span>'#layer-photos-demo img:first'<span style="color: #000000;">).click();
				        });</span>
						</pre>
					</div>
				</div>
			</div>
			
			<div class="dm_title" id='pagingAnchor'>分页</div>
			<div class="dm-item">
				<div class="dm_title2">url跳转</div>
				<div class="dm_tit2Content">
					<div class="pageDiv"></div>
					<div class="pageDiv2" style="margin-top: 5px;"></div>
					<div class="pageDiv3" style="margin-top: 5px;"></div>
					<div class="dm_code">示例代码</div>
					<div>
						<pre>
					        <span style="color: #0000ff;">var</span> pageIndex = Turtle.getQueryString('pageIndex'<span style="color: #000000;">);
					        pageIndex </span>= pageIndex ? +pageIndex - 1 : 0<span style="color: #000000;">;

					        </span><span style="color: #008000;">//</span><span style="color: #008000;"> pageTotal 总条数</span>
					        <span style="color: #008000;">//</span><span style="color: #008000;"> pageIndex 当前页索引</span>
					        <span style="color: #008000;">//</span><span style="color: #008000;"> pageSize 每页显示条数，默认12条</span>
					        <span style="color: #008000;">//</span><span style="color: #008000;"> isInputPageIndex 是否允许输入跳转页索引</span>
					        <span style="color: #008000;">//</span><span style="color: #008000;"> isShowTotal 是否显示总条数</span>
					        <span style="color: #008000;">//</span><span style="color: #008000;"> onPageClick 点击分页执行方法</span>
					        $('.pageDiv'<span style="color: #000000;">).createPage({
					            pageTotal:</span>100<span style="color: #000000;">,
					            pageIndex:pageIndex,
					            isShowTotal:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
					            isInputPageIndex:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">
					        });
					        $(</span>'.pageDiv2'<span style="color: #000000;">).createPage({
					            pageTotal:</span>50<span style="color: #000000;">,
					            pageIndex:pageIndex,
					            isShowTotal:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">
					        });
					        $(</span>'.pageDiv3'<span style="color: #000000;">).createPage({
					            pageTotal:</span>50<span style="color: #000000;">,
					            pageIndex:pageIndex
					        });</span>
						</pre>
					</div>
				</div>
				<div class="dm_title2">AJAX分页</div>
				<div class="dm_tit2Content">
					<div class="pageDivAjax"></div>
					<div class="pageDivAjax2" style="margin-top: 5px;"></div>
					<div class="pageDivAjax3" style="margin-top: 5px;"></div>
					<div class="dm_code">示例代码</div>
					<div>
						<pre>        
					        <span style="color: #0000ff;">function</span><span style="color: #000000;"> getPageAjax (pageIndex,pageTotal,pageSize) {
					            $(</span>'.pageDivAjax'<span style="color: #000000;">).createPageAjax({
					                pageTotal:pageTotal,
					                pageIndex:pageIndex,
					                pageSize:pageSize,
					                isShowTotal:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
					                isInputPageIndex:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
					                onPageClick:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(pIndex) {
					                    </span><span style="color: #008000;">//</span><span style="color: #008000;">点击分页时调用，该方法中会调用ajax重新渲染分页</span>
					                    mockPageAjax(pageSize, pIndex-1<span style="color: #000000;">);
					                }.bind(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">)
					            });
					        }
					        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 每页显示10条，当前索引0</span>
					        mockPageAjax(10,0<span style="color: #000000;">);
					        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 模拟分页时的ajax方法</span>
					        <span style="color: #0000ff;">function</span><span style="color: #000000;"> mockPageAjax(pageSize,pIndex) {
					            </span><span style="color: #008000;">//</span><span style="color: #008000;"> Turtle.ajax.GetJsonP('ajax url',{pageSize:pageSize,pageIndex:pIndex},function(data){</span>
					            <span style="color: #008000;">//</span><span style="color: #008000;">     var pageIndex = data.pageIndex,pageTotal = data.;</span>
					            <span style="color: #008000;">//</span><span style="color: #008000;">     this.getPageAjax(pageIndex,pageTotal,pageSize);</span>
					            <span style="color: #008000;">//</span><span style="color: #008000;"> }.bind(this));</span>
					            
					            <span style="color: #008000;">//</span><span style="color: #008000;"> 以上是正式访问的代码，下面模拟ajax请求</span>
								<span style="color: #000000;">
					            Turtle.showLoading();
					            setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
					                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 这里的总条数和当前索引应该是接口返给我的</span>
					                <span style="color: #0000ff;">var</span> pageTotal = 120<span style="color: #000000;">;
					                getPageAjax(pIndex,pageTotal,pageSize);
					                Turtle.hideLoading();
					            }.bind(</span><span style="color: #0000ff;">this</span>), 1000<span style="color: #000000;">)
					        }</span>
						</pre>
					</div>
				</div>
			</div>
			
			<div class="dm_title" id='iconfontAnchor'>图标icon</div>
			<div class="dm-item">
				<div class="dm_desc">
					更多图标Unicode字符<a target="_blank" href="iconfont.html">Turtle Online公用图标字体文件</a>，这些图标已经包含在Turtle中，可直接使用。
				</div>
				<div class="dm_title2">使用说明</div>
				<div class="dm_tit2Content">
					<div><pre>
						&lt;i class="ttlofont"&gt;&amp;#xe6bd;&lt;/i&gt;
						其中的 &amp;<span style="color: #000000;">#xe6bd; 即是图标对应的Unicode字符
						                         
						你可以去定义它的颜色或者大小，如：<i class="ttlofont" style="font-size: 30px; color: #1E9FFF;">&#xe6bd;</i> 
						</span>&lt;i class="ttlofont" style="font-size: 30px; color: #1E9FFF;"&gt;&amp;#xe6bd;&lt;/i&gt; </pre>
					</div> 
				</div>
				<div class="dm_title2">实例演示</div>
				<div class="dm_tit2Content">
					<i class="ttlofont"style="font-size: 30px; color: green;">&#xe666;</i>
					<i class="ttlofont"style="font-size: 30px; color: red;">&#xe677;</i>
					<i class="ttlofont"style="font-size: 30px; color: blue;">&#xe689;</i>
					<i class="ttlofont"style="font-size: 30px; color: yellow;">&#xe64c;</i>
				</div>
				<div class="dm_title2">独立使用iconfont</div>
				<div class="dm_tit2Content">
					<p>1. 把build中的iconfont文件夹拷贝到你项目中。</p>
					<p>2. 添加以下css代码到你的css文件或者单独的css文件（注意代码中的url路径）：</p>
					<div><pre>
						<span style="color: #800000;">@font-face </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> "ttlofont"</span>;<span style="color: #ff0000;">
						  src</span>:<span style="color: #0000ff;"> url('iconfont.eot')</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> IE9</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
						  src</span>:<span style="color: #0000ff;"> url('iconfont.eot?#iefix') format('embedded-opentype'), </span><span style="color: #008000;">/*</span><span style="color: #008000;"> IE6-IE8 </span><span style="color: #008000;">*/</span><span style="color: #0000ff;">
						  url('iconfont.woff') format('woff'), </span><span style="color: #008000;">/*</span><span style="color: #008000;"> chrome, firefox </span><span style="color: #008000;">*/</span><span style="color: #0000ff;">
						  url('iconfont.ttf') format('truetype'), </span><span style="color: #008000;">/*</span><span style="color: #008000;"> chrome, firefox, opera, Safari, Android, iOS 4.2+</span><span style="color: #008000;">*/</span><span style="color: #0000ff;">
						  url('iconfont.svg#ttlofont') format('svg')</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> iOS 4.1- </span><span style="color: #008000;">*/</span>
						}<span style="color: #800000;">
						.ttlofont </span>{<span style="color: #ff0000;">
						  font-family</span>:<span style="color: #0000ff;">"ttlofont" !important</span>;<span style="color: #ff0000;">
						  font-size</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;">
						  font-style</span>:<span style="color: #0000ff;">normal</span>;<span style="color: #ff0000;">
						  -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased</span>;<span style="color: #ff0000;">
						  -webkit-text-stroke-width</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
						  -moz-osx-font-smoothing</span>:<span style="color: #0000ff;"> grayscale</span>;<span style="color: #ff0000;">
						  vertical-align</span>:<span style="color: #0000ff;"> middle</span>;
						}</pre>
					</div>
				</div>
			</div>
			
			<div class="dm_title" id='formAnchor'>表单</div>
			<div class="dm-item">
				<div class="dm_title2">输入框</div>
				<div class="dm_tit2Content">
					<div class="dm_title3"><span>基本用法</span></div>
					<div class="dm_tit3Content">
						<input type="text" name="title" placeholder="请输入标题" class="ttl-input">
						<div class="dm_code">实例代码</div>
						<div>
							<pre><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="title"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入标题"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="ttl-input"</span><span style="color: #0000ff;">&gt;</span> </pre>
						</div>
					</div>
					<div class="dm_title3"><span>表达式输入框</span></div>
					<div class="dm_tit3Content">
						<div class="ttl-select ttl-expInput dm_expInput" value='' title=''></div>				
						<div class="dm_code">实例代码</div>
						<div>
							<pre>$('.dm_expInput').uiExpressInput({
			data:[
					{id:1,title:'name'},
					{id:2,title:'phone'},
					{id:3,title:'gender'},
					{id:4,title:'country'}
				],
			logicKey:['or','and'],
			equKey:['endWith','in','>','>=','<','<='],
			placeholder:'输入逻辑表达式，支持【or、and、()、=、!=、in、not-in、begin-with、end-with】操作符；键盘上下键选择下拉列表。',

		});</pre>
						</div>
					</div>
				</div>
				<div class="dm_title2">下拉选择框</div>
				<div class="dm_tit2Content">
					<div class="dm_title3"><span>基本用法</span></div>
					<div class="dm_tit3Content">
						<div class="ttl-select dm_showSelect1" value='' title=''></div>
						<div class="ttl-select dm_showSelect2" value='' title=''></div><i></i>
						<br/>
						<div class="dm_code">实例代码</div>
						<div><pre>		$('.dm_showSelect2'<span style="color: #000000;">).uiSelect({
					            data:[{id:</span>1,title:'商丘'<span style="color: #000000;">},
					                    {id:</span>2,title:'郑州'<span style="color: #000000;">},
					                    {id:</span>3,title:'开封'<span style="color: #000000;">},
					                    {id:</span>4,title:'洛阳'<span style="color: #000000;">},
					                    {id:</span>5,title:'信阳'<span style="color: #000000;">},
					                    {id:</span>6,title:'南阳'<span style="color: #000000;">}],
					            index:</span>2, <span style="color: #008000;">//</span><span style="color: #008000;">默认选中项索引</span>
					            id:1, <span style="color: #008000;">//</span><span style="color: #008000;">默认选中项id（优先级高于index）</span>
					            onChange:<span style="color: #0000ff;">function</span><span style="color: #000000;">(item){
					                $(</span>'.dm_showSelect2').next('i').text(item.id+':'+<span style="color: #000000;">item.title);
					            }
					        });</span>
							</pre>
						</div>
					</div>
					<div class="dm_title3"><span>过滤下拉框</span></div>
					<div class="dm_tit3Content">
						<div class="ttl-warn">
							输入内容过滤，过滤列表支持键盘向上、向下和回车操作。
						</div>
						<div class="ttl-select dm_filterSelect1" value='' title=''></div>
						<br/>
						<div class="dm_code">实例代码</div>
						<div class="cnblogs_code">
							<pre>        
						        $(<span style="color: #800000;">'</span><span style="color: #800000;">.dm_filterSelect1</span><span style="color: #800000;">'</span><span style="color: #000000;">).uiSelect({
						            data:[{id:</span><span style="color: #800080;">1</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">平凡的世界</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">2</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">围城</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">3</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">放风筝的人</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">4</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">从你的世界走过</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">5</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">麻衣神相</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">6</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">水浒传</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">7</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">三国演义</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">8</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">史记</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">9</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">阿Q正传</span><span style="color: #800000;">'</span><span style="color: #000000;">},
						                    {id:</span><span style="color: #800080;">10</span>,title:<span style="color: #800000;">'</span><span style="color: #800000;">西游记</span><span style="color: #800000;">'</span><span style="color: #000000;">}],
						            isFilter:</span><span style="color: #0000ff;">true</span>,<span style="color: #008000;">//</span><span style="color: #008000;">是否允许过滤</span>
						        });
							</pre>
						</div>
					</div>

				</div>
				<div class="dm_title2">单选框</div>
				<div class="dm_tit2Content">
					<div class="ttl-checkbox dm_cbox1"></div><i></i>
					<br/>
					<div class="dm_code">实例代码</div>
					<div><pre>		$('.dm_cbox1'<span style="color: #000000;">).uiRadio({
				            data:[{id:</span>1,title:'男'<span style="color: #000000;">},
				                    {id:</span>2,title:'女'<span style="color: #000000;">},
				                    {id:</span>3,title:'保密'<span style="color: #000000;">}],
				            index:</span>2, <span style="color: #008000;">//</span><span style="color: #008000;">默认选中项索引</span>
				            id:5, <span style="color: #008000;">//</span><span style="color: #008000;">默认选中项id（优先级高于index）</span>
				            onChange:<span style="color: #0000ff;">function</span><span style="color: #000000;">(item){
				                $(</span>'.dm_cbox1').next('i').text(item.id+':'+<span style="color: #000000;">item.title);
				            }
				        });</span></pre>
					</div>
				</div>
				<div class="dm_title2">复选框</div>
				<div class="dm_tit2Content">
					<div class="ttl-checkbox dm_cbox2"></div><i></i>
					<br/>
					<div class="dm_code">实例代码</div>
					<div><pre>		$('.dm_cbox2'<span style="color: #000000;">).uiCheckbox({
				            data:[{id:</span>1,title:'金立'<span style="color: #000000;">},
				                    {id:</span>2,title:'华为'<span style="color: #000000;">},
				                    {id:</span>3,title:'坚果'<span style="color: #000000;">}],
				            index:</span>[1,3], <span style="color: #008000;">//</span><span style="color: #008000;">默认选中项索引</span>
				            id:[2,3], <span style="color: #008000;">//</span><span style="color: #008000;">默认选中项id（优先级高于index）</span>
				            <!-- isMultSelect:<span style="color: #0000ff;">true</span>, <span style="color: #008000;">//</span><span style="color: #008000;">是否多选</span> -->
				            onSelect:<span style="color: #0000ff;">function</span><span style="color: #000000;">(data){
				                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 选中/取消某一项时触发，data是当前点击项</span>
				                <span style="color: #0000ff;">var</span> str=data.state==1?'选中了':'取消选中'<span style="color: #000000;">;
				                $(</span>'.dm_cbox2').next('i').text(str+'：'+data.item.id+', '+<span style="color: #000000;">data.item.title);
				            }
				        });</span></pre>
					</div>
				</div>
				<div class="dm_title2">按钮</div>
				<div class="dm_tit2Content">
					<p>
				        <button class="ttl-btn ttl-btn-primary">原始按钮</button>
				        <button class="ttl-btn">默认按钮</button>
				        <button class="ttl-btn ttl-btn-normal">百搭按钮</button>
				        <button class="ttl-btn ttl-btn-warm">暖色按钮</button>
				        <button class="ttl-btn ttl-btn-danger">警告按钮</button>
				        <button class="ttl-btn ttl-btn-disabled">禁用按钮</button>
				    </p>
					<div class="dm_code">实例代码</div>
					<div>
						<pre>                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-primary"</span><span style="color: #0000ff;">&gt;</span>原始按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;</span>默认按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-normal"</span><span style="color: #0000ff;">&gt;</span>百搭按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-warm"</span><span style="color: #0000ff;">&gt;</span>暖色按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-danger"</span><span style="color: #0000ff;">&gt;</span>警告按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-disabled"</span><span style="color: #0000ff;">&gt;</span>禁用按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span></pre>
					</div>
					<br/>
					<p>
				        <button class="ttl-btn ttl-btn-big">大型按钮</button>
				        <button class="ttl-btn">默认按钮</button>
				        <button class="ttl-btn ttl-btn-small">小型按钮</button>
				        <button class="ttl-btn ttl-btn-mini">迷你按钮</button>
				    </p>
					<div class="dm_code">实例代码</div>
					<div>
						<pre>                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-big"</span><span style="color: #0000ff;">&gt;</span>大型按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;</span>默认按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-small"</span><span style="color: #0000ff;">&gt;</span>小型按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-mini"</span><span style="color: #0000ff;">&gt;</span>迷你按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span></pre>
						</div>
					<br/>
				    <p>
				        <button class="ttl-btn ttl-btn-radius ttl-btn-primary">原始按钮</button>
				        <button class="ttl-btn ttl-btn-radius">默认按钮</button>
				        <button class="ttl-btn ttl-btn-radius ttl-btn-normal">百搭按钮</button>
				        <button class="ttl-btn ttl-btn-radius ttl-btn-warm">暖色按钮</button>
				        <button class="ttl-btn ttl-btn-radius ttl-btn-danger">警告按钮</button>
				        <button class="ttl-btn ttl-btn-radius ttl-btn-disabled">禁用按钮</button>
				    </p>
					<div class="dm_code">实例代码</div>
					<div>
						<pre>                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-radius ttl-btn-primary"</span><span style="color: #0000ff;">&gt;</span>原始按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-radius"</span><span style="color: #0000ff;">&gt;</span>默认按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-radius ttl-btn-normal"</span><span style="color: #0000ff;">&gt;</span>百搭按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-radius ttl-btn-warm"</span><span style="color: #0000ff;">&gt;</span>暖色按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-radius ttl-btn-danger"</span><span style="color: #0000ff;">&gt;</span>警告按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-radius ttl-btn-disabled"</span><span style="color: #0000ff;">&gt;</span>禁用按钮<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span></pre>
						</div>
					<br/>
				    <p>
				        <button class="ttl-btn ttl-btn-big ttl-btn-radius ttl-btn-normal">大型百搭</button>
				        <button class="ttl-btn ttl-btn-small ttl-btn-radius ttl-btn-danger">小型警告</button>
				        <button class="ttl-btn ttl-btn-mini ttl-btn-radius ttl-btn-disabled">迷你禁用</button>
				    </p>
					<div class="dm_code">实例代码</div>
					<div>
						<pre>                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-big ttl-btn-radius ttl-btn-normal"</span><span style="color: #0000ff;">&gt;</span>大型百搭<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-small ttl-btn-radius ttl-btn-danger"</span><span style="color: #0000ff;">&gt;</span>小型警告<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn ttl-btn-mini ttl-btn-radius ttl-btn-disabled"</span><span style="color: #0000ff;">&gt;</span>迷你禁用<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span></pre>
						</div>
					<br/>
				    <p>
				        <button class="ttl-btn"><i class="ttlofont">&#xe6d9;</i> 添加</button>
				        <button class="ttl-btn"><i class="ttlofont">&#xe6a4;</i></button>
				        <button class="ttl-btn"><i class="ttlofont">&#xe679;</i></button>
				        <button class="ttl-btn"><i class="ttlofont">&#xe6a3;</i></button>
				        <button class="ttl-btn"><i class="ttlofont">&#xe761;</i></button>
				        <button class="ttl-btn"><i class="ttlofont">&#xe6b4;</i></button>
				        <button class="ttl-btn"><i class="ttlofont">&#xe6f3;</i></button>
				      </p>
					<div class="dm_code">实例代码</div>
					<div>
						<pre>                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttlofont"</span><span style="color: #0000ff;">&gt;</span>&amp;#xe6d9;<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">i</span><span style="color: #0000ff;">&gt;</span> 添加<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttlofont"</span><span style="color: #0000ff;">&gt;</span>&amp;#xe6a4;<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">i</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttlofont"</span><span style="color: #0000ff;">&gt;</span>&amp;#xe679;<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">i</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttlofont"</span><span style="color: #0000ff;">&gt;</span>&amp;#xe6a3;<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">i</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttlofont"</span><span style="color: #0000ff;">&gt;</span>&amp;#xe761;<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">i</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttlofont"</span><span style="color: #0000ff;">&gt;</span>&amp;#xe6b4;<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">i</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-btn"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttlofont"</span><span style="color: #0000ff;">&gt;</span>&amp;#xe6f3;<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">i</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span></pre>
						</div>
					
				</div>
				<div class="dm_title2">文本域</div>
				<div class="dm_tit2Content">
					<textarea placeholder="请输入" class="ttl-textarea"></textarea>
					<div class="dm_code">实例代码</div>
					<div>
						<pre><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">placeholder</span><span style="color: #0000ff;">="请输入"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="ttl-textarea"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">&gt;</span></pre>
					</div>
				</div>

				<div class="dm_title2">组合表单</div>
				<div class="dm_tit2Content">
					<div class="dm_formGroup">
						<div class="ttl-form-item">
				          <label>姓名</label>
				          <p class="ttl-normal">
				          	<input type="text" class="ttl-input">
				          </p>
				        </div>
						<div class="ttl-form-item">
				          <label>性别</label>
				          <div class="ttl-normal">
				          	<div class="ttl-checkbox dm_fgcbox1"></div>
				          </div>
				        </div>
						<div class="ttl-form-item">
				          <label>籍贯</label>
				          <div class="ttl-normal">
				          	<div class="ttl-select dm_fgSelect" value='' title=''></div>
				          </div>
				        </div>
						<div class="ttl-form-item">
				          <label>爱好</label>
				          <div class="ttl-normal">
				          	<div class="ttl-checkbox dm_fgcbox2"></div>
				          </div>
				        </div>						
				        <div class="ttl-form-item">
				          <label>电话</label>
				          <p class="ttl-mult">
				          	<input type="text" class="ttl-input">
				          	<i class='ttl-warn'>*</i>
				          	<i class='ttl-mark'>11位号码</i>
				          </p>
				        </div>
				        <div class="ttl-form-item">
				          <label>详细地址</label>
				          <p class="ttl-full">
				          	<input type="text" class="ttl-input">
				          </p>
				        </div>
				        <div class="ttl-form-item">
				          <label>密码</label>
				          <p class="ttl-mult">
				          	<input type="password" class="ttl-input">
				          	<button class="ttl-btn ttl-btn-small">提示</button>
				          </p>
				        </div>
				        <div class="ttl-form-item">
				          <label>价格</label>
				          <p class="ttl-mult ttl-small">
				          	<input type="text" placeholder="￥" class="ttl-input">
				          	<i class='ttl-mark'>-</i>
				          	<input type="text" placeholder="￥" class="ttl-input">
				          </p>
				        </div>
				        <div class="ttl-form-item">
				          <label>个人经历</label>
				          <div class="ttl-full">
				          	<textarea placeholder="请输入" class="ttl-textarea"></textarea>
				          </div>
				        </div>
					</div>

					<div class="dm_code">实例代码</div>
					<div><pre>			
						<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-form-item"</span><span style="color: #0000ff;">&gt;</span>
			                          <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">label</span><span style="color: #0000ff;">&gt;</span>姓名<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">label</span><span style="color: #0000ff;">&gt;</span>
			                          <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ttl-normal"</span><span style="color: #0000ff;">&gt; /*ttl-full,ttl-normal,ttl-mult,ttl-small*/</span>
			                              <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="ttl-input"</span><span style="color: #0000ff;">&gt;</span>
			                          <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
			                        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span></pre>
					</div>
					
				</div>
			</div>

			<div class="dm_title" id='cpageViewAnchor'>cPageView（页面框架）</div>
			<div class="dm_desc">
				<p>1. 继承Backbone.View</p>
				<p>2. 自定义事件方法：<i>on、off、trigger、once</i></p>
				<p>3. 页面交互事件定义：<i>events{}</i></p>
				<p>4. 页面初始化：<i>initiapze()</i></p>
				<p>5. 全局jquery对象：<i>$el</i></p>
			</div>
			<div class="dm-item">		
				<div class="dm_title2">实例演示</div>
				<div class="dm_tit2Content">
					<p>初始化时被改变：<span id="cpageviewTest3">初始化时会帮给我赋值</span></p>
					<a href="javascript:;" class="ttl-btn ttl-btn" id="cpageviewTest1">apitest帮我定义事件</a>
					<div id="cpageviewTest2">点击上面的按钮改变我的html</div>
					<div class="dm_code">示例代码</div>
					<div><pre>		define(['cPageView'],<span style="color: #0000ff;">function</span><span style="color: #000000;">(PageView) {
					    </span><span style="color: #0000ff;">var</span> View =<span style="color: #000000;"> PageView.extend({
					        events:{
					            </span>'click #cpageviewTest1':'clicktest1'<span style="color: #000000;">
					        },
					        initialize: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
					            console.log(</span>'initialize'<span style="color: #000000;">);
					            </span><span style="color: #0000ff;">this</span>.$el.find('#cpageviewTest3').html('默认值被改变'<span style="color: #000000;">);
					            </span><span style="color: #0000ff;">this</span>.on('initpage',<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
					                console.log(</span>'initpage'<span style="color: #000000;">);
					            });
					            </span><span style="color: #0000ff;">this</span>.trigger('initpage'<span style="color: #000000;">);
					        },
					        clicktest1:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e){
					            </span><span style="color: #0000ff;">this</span>.$el.find('#cpageviewTest2').html('赋值成功！'+<span style="color: #0000ff;">new</span><span style="color: #000000;"> Date())
					        }
					    })
					    </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">new</span><span style="color: #000000;"> View();
						});</span>
					</pre></div>
				</div>
			</div>			

			<div class="dm_title" id='templateAnchor'>模板（Require.text.js）</div>
			<div class="dm_desc">
				<p>Require.text.js已经打包入Turtle框架中，不需要独立引用</p>
			</div>
			<div class="dm-item">		
				<div class="dm_title2">实例演示</div>
				<div class="dm_tit2Content">
					<a href="javascript:;" class="ttl-btn ttl-btn" id="templateA">点击我获取模板html</a>
					<p id="templateTest">点击上面的按钮改变我</p>
					<div class="dm_code">html模板</div>
					<div>
						<pre>				<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">
						    你好，</span><span style="background-color: #ffff00; color: #000000;">&lt;%</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">name</span><span style="background-color: #ffff00; color: #000000;">%&gt;</span><span style="color: #000000;">，我来自模板 temptest.html
						</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
						</pre>
					</div>
					<div class="dm_code">js调用</div>
					<div>
						<pre>				define(['cPageView','text!views/temple/temptest.html'],<span style="color: #0000ff;">function</span><span style="color: #000000;">(PageView,temptest) {
						    </span><span style="color: #0000ff;">var</span> View =<span style="color: #000000;"> PageView.extend({
						        events:{
						            </span>'click #templateA':'clicktest2'<span style="color: #000000;">
						        },
						        clicktest2:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
						            $(</span>'#templateTest').html(_.template(temptest)({name:'Alec yin'<span style="color: #000000;">}));
						        }
						    })
						    </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">new</span><span style="color: #000000;"> View();
						});</span>
						</pre>
					</div>
				</div>
			</div>

			
			<div class="dm_title" id='commonAPI'>公共方法</div>
			<div class="dm_desc">
				<p>以下方法调用时，均是以【Turtle./turtle.】开头，如：Turtle.showLoading()/turtle.showLoading()。</p>
				<p>Turtle内置有<a href="http://www.css88.com/doc/underscore" target="_blank">underscore.js</a>，所以underscoreJS中的方法也可使用。</p>
			</div>
			<div class="dm-item dm_desc">
				<div class="dm_title2">弹层快捷调用</div>
				<div class="dm_tit2Content">
					<p><i>msg/layer.msg</i>：显示提示信息，在一定时间内自动消失</p>
					<p><i>alert/layer.alert</i>：显示提示框</p>
					<p><i>confirm/layer.confirm</i>：显示确认框</p>
					<p><i>showLoading</i>：显示加载中动画</p>
					<p><i>hideLoading</i>：隐藏加载中动画</p>
				</div>
				<div class="dm_title2">页面跳转</div>
				<div class="dm_tit2Content">
					<p><i>goBack</i>：返回上一页</p>
					<p><i>goTo</i>：跳转指定url</p>
				</div>
				<div class="dm_title2">本地存储</div>
				<div class="dm_tit2Content">
					<p><i>setCookie</i>: 保存cookie</p>
					<p><i>getCookie</i>: 获取cookie</p>
					<p><i>removeCookie</i>: 移除cookie</p>
					<p><i>setStorage</i>: 保存Storage</p>
					<p><i>getStorage</i>: 获取Storage</p>
				</div>
				<div class="dm_title2">时间处理</div>
				<div class="dm_tit2Content">
					<p><i>dateUtil.formatNum</i>：1-9返回01,02,...；eg：formatNum(5) // 05 ；formatNum(10) //10</p>
					<p><i>dateUtil.parse</i>：将字符串转换为日期，支持格式y-m-d ymd (y m r)以及标准的。返回日期对象；dateUtil.parse('2015/5/3','y/m/d')；dateUtil.parse('2015-5-3','y-m-d')</p>
					<p><i>dateUtil.format</i>：将日期格式化为字符串。format(new Date(), 'y/m/d')；format(new Date(), 'Y/M/D H:F:S');</p>
					<p><i>dateUtil.isDate</i>：判断是不是时间对象</p>
					<p><i>dateUtil.isLeapYear</i>：是否为闰年</p>
					<p><i>dateUtil.getDaysOfMonth</i>：获取一个月份的天数</p>
					<p><i>dateUtil.getBeginDayOfMouth</i>：获取一个月份1号是星期几，注意此时的月份传入时需要自主减一。return {num} 当月一号为星期几，0是星期天，1是星期一</p>
					<p><i>dateUtil.ToDate</i>：把格式为 /Date(136883030349000)/ 转化为"yyyy-MM-dd hh:mm:ss"格式</p>
					<p><i>dateUtil.dateDiff(date1, date2, interval)</i>：获取两个日期的间隔时间。参数：interval {String} 间隔类型（毫秒、秒、分钟、小时、天、月、年）</p>
					
					<p><i>日期对象.addYears</i>：加上特定的年份。返回加好年份的日期对象</p> 
					<p><i>日期对象.addMonths</i>：加上特定的月份。返回加好月份的日期对象</p> 
					<p><i>日期对象.addDays</i>：加上特定的天数。返回加好天数的日期对象</p> 
					<p><i>日期对象.addHours</i>：加上特定的小时数。返回加好小时数的日期对象</p> 
					<p><i>日期对象.addMinutes</i>：加上特定的分钟数。返回加好分钟数的日期对象</p> 
					<p><i>日期对象.addSeconds</i>：加上特定的秒数。返回加好秒数的日期对象</p> 
					<p><i>日期对象.toDate</i>：生成对应的日期对象,去掉时分秒，只保留年月日星期</p> 
					<p><i>日期对象.toStdDateString</i>：生成对应的日期字符串，yyyy-MM-dd</p> 
					<p><i>日期对象.toStdDateTimeString</i>：生成对应的日期字符串，yyyy-MM-dd HH:mm:ss</p> 
					<p><i>日期对象.toEngDateString</i>：生成对应的英文版日期字符串，Oct-31-2016</p>
					<p><i>日期对象.toFormatString</i>：生成需要的格式的日期字符串，参数：yMdhmsS=>年月日时分秒毫秒，如yyyy-MM-dd hh:mm:ss:SS</p> 
				</div>
				<div class="dm_title2">AJAX调用</div>
				<div class="dm_tit2Content">
					<p><i>ajax.GetJsonP</i>: ajax get jsonp</p>
					<p><i>ajax.PostJsonP</i>: ajax post jsonp</p>
					<p><i>ajax.PostJson</i>: ajax post json</p>
					<p><i>ajax.GetJson</i>: ajax get json</p>
				</div>
				<div class="dm_title2">获取当前位置</div>
				<div class="dm_tit2Content">
					<p><i>position.getCurrentPosition</i>: 获取当前位置（省市区街道）</p>
					<div class="dm_code">实例代码</div>
					<div>
						<pre>turtle.position.getCurrentPosition('baidu',<span style="color: #0000ff;">function</span>(position){console.log(position)})；<div style="color: #008000;">//</span><span style="color: #008000;">["协和路", "长宁区", "上海市", "上海市", "中国"]</div>turtle.position.getCurrentPosition('google',<span style="color: #0000ff;">function</span>(position){console.log(position)})；<div style="color: #008000;">//</span><span style="color: #008000;">["S20外环高速入口", "长宁区", "上海市", "上海市", "中国"]</div></pre>
					</div>					
				</div>
				<div class="dm_title2">其他常用</div>
				<div class="dm_tit2Content">
					<p><i>isNullValue</i>: 是否是：undefined/""/null/"null"</p>
					<p><i>isEmptyObject</i>: 是否空对象</p>
					<p><i>isEmail</i>: 验证邮箱</p>
					<p><i>enterClick(event, fn)</i>: 回车执行fn</p>
					<p><i>getQueryString</i>: 获取url参数</p>
					<p><i>clone</i>: 克隆对象</p>
					<p><i>stringFormat</i>: str字符串格式化赋值。eg：stringFormat('我叫$1,来自$2','Alec','中国')</p>
					<p><i>getType</i>: 获取对象类型【'boolean'、'number'、'string'、'function'、'array'、'date'、'regexp'、'error'】</p>
					<p><i>stringifyJSONstr</i>: 任何对象转化为json字符串</p>
					<p><i>strToJson</i>: str转化为json对象</p>
					<p><i>jsonToObject</i>: json转换成对象</p>
					<p><i>createGuid</i>: 创建GUID</p>
					<p><i>createHtmlObj</i>: 根据html创建html对象</p>
					<p><i>toArraySelf</i>: 把list转化为数组</p>
					<p><i>loadCss</i>: 加载CSS，直接把css内容加载到head中</p>
					<p><i>loadCssHref</i>: 加载CSS引用到head中，参数：数组/字符串</p>
					<p><i>loadJs</i>: 加载js脚本，直接把css内容加载body后</p>
					<p><i>loadJsSrc</i>: 加载js引用到head中，参数：数组/字符串</p>
					<p><i>loadJsSrcOrder</i>: 按顺序加载js引用到head中，前一个加载完成再加载下一个(下一个在前一个回调函数中加载)，全部加载完，执行总体回调，参数：数组/字符串，总体回调</p>
				</div>				
				<div class="dm_title2">浏览器判断</div>
				<div class="dm_tit2Content">
					<p><i>browser.silk</i>：Silk浏览器，亚马逊推出的云浏览器</p>
					<p><i>browser.playbook</i>：黑莓PlayBook平板机</p>
					<p><i>browser.chrome</i>：chrome浏览器</p>
					<p><i>browser.firefox</i>：firefox</p>
					<p><i>browser.ie</i>：ie</p>
					<p><i>browser.webview</i>：iPhone|iPod|iPad系统下的AppleWebKit，不是chrome</p>
					<p><i>browser.safari</i>：safari</p>
					<p><i>browser.weixin</i>：weixin内置浏览器</p>
				</div>
			</div>	



		</div>
	</div>
	<div class="dm_footer">
		url后增加【?debug=1】查看源代码，否则使用压缩代码。
	</div>
	<script type="text/javascript">
		// 控制页面ul 展开折叠
		function ulliMange() {
			$('.dm_nav ul li a').click(function() {
				if(!$(this).parent().hasClass('dm_select')){
					$('.dm_nav ul li').removeClass('dm_select');
					$(this).parent().addClass('dm_select');
				}
				var forid = $(this).attr('forid');
				forid && $("html,body").animate({scrollTop:$('#'+forid).offset().top},300);
			});
		}
		// 测试min的时候，只保留paths中的index/apiTest
		var _paths={
			"index": "views/js/index",
			"apiTest": "views/js/apitest"
		};
		if(_getQS('debug')==1){
			_paths={
				"index": "views/js/index",
				"apiTest": "views/js/apitest",
				"text": "common/require.text",
				"cPageView": "api/c.page.view"
			};
		}
		function requirejsLoad(){
			requirejs.config({
				baseUrl: location.href.indexOf('localhost')>-1?"http://localhost/turtleOnline":"http://yinluhui.oschina.io/turtle-online/code",
				paths: _paths,
				waitSeconds: 20
			});
			require(["index", "apiTest"]);
		}
		var inter = setInterval(function() {
			if (typeof define === 'function'&& typeof _ ==='function' && typeof jQuery ==='function' 
				&& typeof Backbone==='object' && typeof Turtle==='object' && typeof $.Poshytip ==='function' 
				&& typeof $.fn.createImgSlider ==='function'&& typeof Turtle.browser ==='object') {
				requirejsLoad();
				clearInterval(inter);
				ulliMange();
			}
		}, 100);
	</script>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</body>
</html>